<template>
    <div class="counter-container">
        <button class="btn-button" type="button" @click="sub">-</button>
        <span class="num">{{Coun}}</span>
        <button class="btn-button" type="button" @click="add">+</button>
    </div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
    props: {
        id: {
            type: Number,
            default: 0
        },
        Coun: {
            type: Number,
            default: 0
        }
    },
    methods: {
        // 加
        add(){
            bus.$emit('coun-add',{ id: this.id, value: this.Coun + 1})
        },
        // 减
        sub(){
            // 点击减号前要先判断是不是0,是0的话就不要减了
            if(this.Coun - 1 === 0) return
            bus.$emit('coun-sub',{ id: this.id, value: this.Coun - 1})
        }
    }
}
</script>
<style lang="less" scoped>
.num{
    margin: 0 16px;
}
.btn-button{
    border: none;
    width: 40px;
    height: 26px;
}
</style>
    
